/*
 * @Author: luocaisen 
 * @Date: 2024-09-14 18:16:04 
 * @Last Modified by: luocaisen
 * @Last Modified time: 2024-10-30 22:58:13
 * @description 底部导航组件
 */
<template>
	<view class="nav-container">
		<view class="nav-item item-home" :class="{ active: active === 'home' }">
			<view v-if="active === 'home'" class="item-box">
				<view class="nav-active-icon"></view>
			</view>
			<view v-else class="item-box" @click="navClick('home')">
				<view class="icon-box">
					<view class="nav-icon"></view>
				</view>
				<view class="nav-text">首页</view>
			</view>
		</view>
		<view
			  class="nav-item item-message"
			  :class="{ active: active === 'message' }">
			<view v-if="active === 'message'" class="item-box">
				<view class="nav-active-icon">
					<view v-if="msgNum > 0" class="msgNum">{{ msgNum }}</view>
				</view>
			</view>
			<view v-else class="item-box" @click="navClick('message')">
				<view class="icon-box">
					<view class="nav-icon"></view>
					<view v-if="msgNum > 0" class="msgNum">{{ msgNum }}</view>
				</view>
				<view class="nav-text">消息</view>
			</view>
		</view>
		<view class="nav-item item-my" :class="{ active: active === 'my' }">
			<view v-if="active === 'my'" class="item-box">
				<view class="nav-active-icon"></view>
			</view>
			<view v-else class="item-box" @click="navClick('my')">
				<view class="icon-box">
					<view class="nav-icon"></view>
				</view>
				<view class="nav-text">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	name: "MenuNav",
	data() {
		return {};
	},
	methods: {
		navClick(active) {
			let url = "";
			switch (active) {
				case "home":
					url = "/pages/index/index";
					break;
				case "message":
					url = "/pages/message/index";
					break;
				case "my":
					url = "/pages/my/index";
					break;
				default:
					break;
			}

			this.$store.commit("changeMenuNav", active);

			if (url) {
				uni.switchTab({
					url: url,
				});
			}
		},
	},
	computed: {
		...mapState({
			active: (state) => state.menuNav,
			msgNum: (state) => state.msgNum,
		}),
	},
};
</script>

<style lang="scss" scoped>
.nav-container {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 98rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 2rpx solid #e3e6e5;
	box-shadow: 0 -4rpx 12rpx 0 rgba(24, 27, 27, 0.1);
	display: flex;
	background-color: #ffffff;

	.nav-item {
		text-align: center;

		.item-box {
			overflow: hidden;
			height: 100%;
			position: relative;

			.nav-active-icon {
				display: block;
				width: 72rpx;
				height: 72rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin: 14rpx auto 0;
				position: relative;

				.msgNum {
					top: -16rpx;
					right: 4rpx;
				}
			}

			.icon-box {
				display: block;
				width: 48rpx;
				height: 48rpx;
				margin: 12rpx auto 0;
				position: relative;
			}

			.nav-icon {
				display: block;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.nav-text {
				font-size: 20rpx;
				font-weight: 400;
				color: #181b1b;
			}

			.msgNum {
				position: absolute;
				display: block;
				width: 32rpx;
				height: 32rpx;
				font-size: 22rpx;
				color: #ffffff;
				border-radius: 50%;
				background-color: #ff1919;
				top: -12rpx;
				right: -12rpx;
				border: 2rpx solid #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.item-home {
		width: 248rpx;

		.nav-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_home.png");
		}
	}

	.item-message {
		width: 254rpx;

		.nav-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_message.png");
		}

		.nav-active-icon {
			margin-top: 22rpx !important;
		}
	}

	.item-my {
		width: 248rpx;

		.nav-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_my.png");
		}
	}

	.active {
		.nav-active-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_home_active.png");
		}
	}

	.active {
		.nav-active-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_message_active.png");
		}
	}

	.active {
		.nav-active-icon {
			background-image: url("https://hengfengzhigao.cn/images/nav/icon_my_active.png");
		}
	}
}
</style>